<template>
  <div class="detail" v-if="obj">
    <div class="outside">
      <van-icon name="arrow-left" class="goexit" @click="back" />
      <van-icon name="chat-o" class="message" />
      <van-image width="100%" height="100%" :src="obj.coverImg" />
      <p class="productname">{{ obj.name }}</p>
      <p>
        「购机享延保、碎屏保8折优惠，赠小米移动流量卡」 6.53"超大护眼屏幕｜
        5000mAh长循环大电量｜ 大音量扬声器 ｜1300万AI相机
        ｜人脸解锁｜G25八核处理器
      </p>
      <p class="productprice"><span>¥</span>{{ obj.price }}</p>
      <van-cell title="分期" is-link value="花呗分期/小米分期" />
      <van-cell title="已选" is-link value="" />
      <van-cell title="配送至" is-link value="河南省/郑州市/中原区" />
      <!-- <van-icon name="passed" class="icon" /> -->
      <van-cell icon="passed" value="支持七天无理由退换货" class="qi" />
      <van-cell title="配件" is-link value="充电器 耳机 " />
      <van-cell-group inset>
        <van-cell title="用户评价（1234）" value="98%好评率" />
        <van-cell title="斧头说：" value="" label="1234饿到几点都能看到我" />
      </van-cell-group>
      <van-image width="100%" height="100%" fit="contain" :src="obj.coverImg" />

      <van-goods-action class="box">
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="gocart" />
        <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-goods-action-button
          type="danger"
          text="加入购物车"
          @click="addcart(obj._id)"
          color="orange"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { reqProductDetail } from "../../api/products";
import { Toast } from "vant";
import { addToCart } from "../../api/cart";
export default {
  components: {},
  data() {
    return {
      id: "",
      obj: null,
      show: false,
    };
  },
  computed: {},
  watch: {},

  methods: {
    //初始化详情
    async init(id) {
      const result = await reqProductDetail(id);
      console.log(result);
      this.obj = result.data;
    },
    async addcart(id) {
      //id是商品id
      const result = await addToCart(id);
      console.log(result);
      if (result.data.code === "success") {
        Toast.success("添加购物车成功");
        this.$router.push("/cart");
        // this.$router.push("/cart");
        this.show = true;
      }
    },
    //跳转到购物车页面
    gocart() {
      this.$router.push("/cart");
    },
    onClickIcon() {
      Toast("点击图标");
    },
    //点击返回分类页面
    back() {
      this.$router.push("/fenlei");
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.init(this.id);
  },
  mounted() {},
};
</script>
<style scoped>
.outside {
  overflow: hidden;
}
.box {
  position: fixed;
  bottom: 0px;
  left: 0;
}
.outside p {
  line-height: 15px;
  font-size: 10px;
  padding: 10px;
}
.outside .productname {
  font-size: 14px;
}
.outside .productprice span {
  font-size: 12px;
}
.outside .productprice {
  font-size: 16px;
  color: red;
}
.goexit {
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 99;
}
.message {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 99;
}
</style>
